<template>
	<view>
		<view class="date" v-if="startYear != endYear || startMonth != endMonth || startDate != endDate" @tap="ifTime">{{startYear}}年{{startMonth}}月{{startDate}}日—{{endYear}}年{{endMonth}}月{{endDate}}日学情
			<i class="iconfont iconxiala"></i>
		</view>
		<view class="date" v-if="startYear == endYear && startMonth == endMonth && startDate == endDate" @tap="ifTime">{{startYear}}年{{startMonth}}月{{startDate}}日学情
			<i class="iconfont iconxiala"></i>
		</view>
		<uni-calendar v-if="isShow" v-model="monthday" :monthday="monthday" :daytime="daytime" :insert="true" :range="true" @change="change" @ifShow="ifShow" @getList="getList"/>
		<view class="list" v-if="list.length > 0">
			<view class="listItem" v-for="(item,index) in list" :key="index">
				<view class="index">{{item.time}}</view>
				<view class="info">
					<!-- <view class="image">
						<image :src="item.avatar" mode="aspectFit"></image>
					</view> -->
					<view class="num">{{item.question_num}}t
						<i v-if="item.question_num_top == 1" class="iconfont iconshangsheng"></i>
						<i v-if="item.question_num_top == 0" class="iconfont iconxiajiang-copy"></i>
					</view>
					<view class="num">{{item.accuracy}}%
						<i v-if="item.accuracy_top == 1" class="iconfont iconshangsheng"></i>
						<i v-if="item.accuracy_top == 0" class="iconfont iconxiajiang-copy"></i>
					</view>
					<view class="num">{{item.duration}}h
						<i v-if="item.duration_top == 1" class="iconfont iconshangsheng"></i>
						<i v-if="item.duration_top == 0" class="iconfont iconxiajiang-copy"></i>
					</view>
				</view>
			</view>
		</view>
		<view class="none" v-else>没有记录</view>
	</view>
</template>

<script>
	import util from '@/common/util.js'
	import uniCalendar from '@/components/uni-calendar1/uni-calendar'
	export default {
		components: {
			uniCalendar
		},
		data() {
			return {
				isShow: false,
				list: [],
				startime: '',
				endTime: '',
				startYear: '',
				startMonth: '',
				startDate: '',
				endYear: '',
				endMonth: '',
				endDate: '',
				student_id: '',
				monthday : '',
				daytime:0
			}
		},
		onLoad(e) {
			this.student_id = e.student_id;
			var date = new Date();
			var year = date.getFullYear(); //当前年份
			var month = date.getMonth(); //当前月份
			var day = date.getDate(); //当前日期
			this.startime = Date.UTC(year, month, day, -8, 0, 0) / 1000; //当前日期零点
			var endTime = Date.UTC(year, month, day+1, -8, 0, 0) / 1000; //当前日期零点
			this.endTime = parseInt(endTime-1);
			var len = {}
			len.start = this.startime;
			len.end = this.endTime;
			this.getList(len);
		},
		methods: {
			/* 日历 */
			change(e) {
				// console.log(e.range);
				if(e.range.end != '') {
					/* 获取开始时间 */
					var startLen = e.range.begin.split('-');
					var startYear = startLen[0];
					var startMonth = startLen[1];
					var startDate = startLen[2];
					/* 获取结束时间 */
					var endLen = e.range.end.split('-');
					var endYear = endLen[0];
					var endMonth = endLen[1];
					var endDate = endLen[2];
					/* 转换为时间戳格式 */
					var start = Date.UTC(startYear, startMonth-1, startDate, -8, 0, 0) / 1000;
					var end = Date.UTC(endYear,Number(endMonth)-1,Number(endDate)+1, -8, 0, 0) / 1000;
					end = parseInt(end-1)
					var len = {}
					len.start = start;
					len.end = end;
					this.getList(len);
				}
			},
			ifShow() {
				this.isShow = false;
			},
			ifTime() {
				this.isShow = !this.isShow;
			},
			/* 记录列表 */
			getList(len) {
				this.daytime=len.start;
				var start = new Date(len.start * 1000);
				this.startYear = start.getFullYear(start);
				this.startMonth = start.getMonth(start) + 1;
				this.startDate = start.getDate(start);
				var end = new Date(len.end * 1000);
				this.endYear = end.getFullYear(end);
				this.endMonth = end.getMonth(end) + 1;
				this.endDate = end.getDate(end);
				
				var data = {
					start_time: len.start,
					end_time: len.end,
					user_id: this.student_id
				}
				this.$zapi.apiPost('user/ciondetails.Users/getrecordList',data).then(res => {
					if(res.data.code == 200) {
						this.list = res.data.data;
						for(var i = 0; i < this.list.length; i++) {
							this.list[i].accuracy = parseInt(this.list[i].accuracy*100);
							this.list[i].duration = parseFloat(this.list[i].duration/3600).toFixed(1);
							this.list[i].time = util.getnewTime(this.list[i].date)
						}
					} else {
						this.list = [];
					}
					this.$forceUpdate();
				})
			}
		}
	}
</script>

<style>
	/* 时间模块 */
	.date {
		height: 100upx;
		display: flex;
		justify-content: flex-end;
		margin-right: 30upx;
		align-items: center;
		color: #666666;
		font-size: 30upx;
	}

	.iconxiala {
		margin-left: 20upx;
	}

	/* 列表模块 */
	.list {
		width: 690upx;
		margin: 0 auto;
	}

	.listItem {
		width: 100%;
		height: 100upx;
		line-height: 100upx;
		margin-bottom: 20upx;
		display: flex;
		justify-content: space-between;
	}

	.listItem .index {
		color: #999999;
		font-size: 30upx;
		margin: 0 10upx;
		line-height: 100upx;
	}

	.info {
		width: 580upx;
		display: flex;
		justify-content: flex-start;
		background: linear-gradient(270deg,rgba(254,118,91,0.1) 0%,rgba(254,185,104,0.1) 100%);
		border-radius: 0px 8upx 8upx 60upx;
	}

	.image {
		width: 70upx;
		height: 70upx;
		margin-left: -34upx;
		margin-top: -6upx;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.num {
		width: 33.3%;
		color: #AB6121;
		font-size: 36upx;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.iconshangsheng {
		color: #42D073;
		/* font-size: 26upx; */
		line-height: 100upx;
	}

	.iconxiajiang-copy {
		color: #FFB800;
		/* font-size: 26upx; */
		line-height: 100upx;
	}
	.none{
		color: #666666;
		text-align: center;
		margin-top: 100upx;
		font-size: 36upx;
	}
</style>
